<template>
  <div>
    <!-- 返回 -->
    <top-back>
      <template v-slot:back>用户信息</template>
    </top-back>

    <!-- 用户信息 -->
    <van-cell-group>
      <van-cell title="头像" class="headerimg" @click="setHeaderimg">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <img :src="user.headerimg" alt="" />
          <van-icon name="arrow" />
        </template>
      </van-cell>
      <van-cell title="账号" :value="user.id" class="userId"/>
      <van-cell title="昵称" :value="user.username" is-link @click="setUsername" > </van-cell>
      <van-cell title="简介" :value="user.desc" is-link @click="setDesc"/>

    </van-cell-group>

  </div>
</template>

<script>
import TopBack from '@/components/Mine/TopBack'
import { Toast } from 'vant'

export default {
  name: 'SetUserInfo',
  components: { TopBack },
  data () {
    return {
      user: {}
    }
  },
  created () {
    this.user = this.$store.getters.user
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    setUsername () {
      this.$router.push('/setusername')
    },
    setDesc () {
      this.$router.push('/setdesc')
    },
    setHeaderimg () {
      Toast('功能开发中')
    }
  }
}
</script>

<style lang="scss" scoped>
img {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin-right: 0.2rem;
}
.headerimg {
  display: flex;
  align-items: center;
}
.cell_grop {
  margin: 0.25rem 0;
}
.userId {
  padding-right: 36px;
}
.van-cell__value {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
